<template>
  <div class="info-wrap">
    <!-- 搜索条件 -->
    <div class="info-search">
      <!-- 商户信息 -->
      <div class="merchant-info">
        <el-form :model="merchantForm" label-width="110px">
          <div class="form-item-group">
            <el-form-item label="商户名称：" style="width: 100%">
              <el-input v-model="merchantForm.companyName" disabled></el-input>
            </el-form-item>
          </div>
          <div class="form-item-group">
            <el-form-item label="商户联系人：">
              <el-input v-model="merchantForm.managerName" disabled></el-input>
            </el-form-item>
            <el-form-item label="商户联系方式：">
              <el-input v-model="merchantForm.companyMobile" disabled></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- <el-button type="primary" class="search-btn" @click="initPage">查询</el-button> -->
      </div>
      <!-- 油站搜索条件 -->
      <div class="gas-info">
        <el-form :inline="true" :model="gasForm" size="mini">
          <el-form-item label="油站名称：">
            <el-select v-model="gasForm.gasId" placeholder="请选择" clearable >
              <el-option v-for="item in options" :key="item.gasId" :value="item.gasId" :label="item.gasName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="油站站长：">
            <el-input v-model="gasForm.gasOwnerName" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系方式：">
            <el-input v-model="gasForm.gasOwnerMobile" clearable></el-input>
          </el-form-item>
          <el-form-item label="营业状态：">
            <el-select v-model="gasForm.gasStatus" placeholder="请选择" clearable>
              <el-option v-for="(item, index) in gasStatus" :key="index" :value="Number(index)" :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="search-btn" @click="initPage">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-wrap">
      <el-table
        :data="tableData"
        stripe
        size="small"
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          prop="gasId"
          label="油站编码"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="gasName"
          label="油站名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gasAddress"
          align="center"
          label="油站地址">
        </el-table-column>
        <el-table-column
          prop="gasOwnerName"
          align="center"
          label="油站站长"
          width="100">
        </el-table-column>
        <el-table-column
          prop="gasOwnerMobile"
          align="center"
          label="站长联系方式"
          width="120">
        </el-table-column>
        <el-table-column
          prop="gasStatus"
          align="center"
          label="营业状态"
          width="100">
          <template slot-scope="{row}">
            <div>
              {{ gasStatus[row.gasStatus] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作项"
          width="250">
          <template slot-scope="{row}">
            <div>
              <el-button class="table-mini-btn" v-if="row.showCloseButton" @click="closeGas(row.gasId)">暂时关闭</el-button>
              <el-button class="table-mini-btn" @click="toDetail(0, row)">修改</el-button>
              <el-button class="table-mini-btn" @click="toDetail(1, row)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="pagination.pageIndex"
          :page-size="pagination.pageSize"
          :page-sizes="[10, 50, 100, 200]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="showAddGasDialog"
      width="30%"
      center>
      <el-dialog
        title="填写原因"
        :visible.sync="showReasonDialog"
        width="30%"
        append-to-body
        center>
        <el-input
          type="textarea"
          :rows="2"
          :maxlength="50"
          placeholder="50字以内，必填"
          v-model="comment">
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showReasonDialog = false; comment = ''">取 消</el-button>
          <el-button v-loading="closeLoading" type="primary" @click="closeGasApi">确 定</el-button>
        </span>
      </el-dialog>
      <span>下线将导致车主将无法通过团油前往该站消费，是否继续下线？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddGasDialog = false">取 消</el-button>
        <el-button type="primary" @click="showReasonDialog = true">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getGasList, getCompanyInfo, getAllGasInfoList, getBusinessStatus, closeGasInfo } from '@/api/gasStationManage/gasInfo'
import _ from 'lodash'

export default {
  name: 'gasStationManage_gasStationInfo',
  data () { 
    return {
      merchantForm: {
        companyName: '',
        managerName: '',
        companyMobile: ''
      },
      gasForm: {
        gasId: '',
        gasOwnerName: '',
        gasOwnerMobile: '',
        gasStatus: ''
      },
      tableData: [],
      pagination: {
        pageSize: 10,
        pageIndex: 1
      },
      total: 0,
      loading: false,
      closeLoading: false,
      gasStatus: [],
      options: [],
      showAddGasDialog: false,
      showReasonDialog: false,
      gasId: '',
      comment: ''
    }
  },
  methods: {
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.initPage()
    },
    pageChange (val) {
      this.pagination.pageIndex = val
      this.initPage()
    },
    // 初始化列表
    initPage: _.throttle( async function () {
      this.loading = true
      const params = {
        ...this.pagination,
        ...this.gasForm
      }
      try {
        const { code, result, totalRow } = await getGasList(params)
        if (code !== 200) return
        this.tableData = result || []
        this.total = totalRow
        this.loading = false
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    }, 1000),
    // 获取所有油站名称
    async initGasNameSelect () {
      try {
        const { code, result } = await getAllGasInfoList()
        if (code !== 200) return
        if (result) {
          this.options = result.map(item => {
            return {
              gasName: item.gasName,
              gasId: item.gasId
            }
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取商户信息
    async getCompanyInfo () {
      try {
        const { code, result } = await getCompanyInfo()
        if (code !== 200) return
        Object.assign(this.merchantForm, result)
        localStorage.setItem('companyInfo', JSON.stringify(result))
      } catch (err) {
        console.log(err)
      }
    },
    /**
     * @description 查看详情
     * @param {type} 0 为修改，1 为查看详情
     */
    toDetail (type, row) {
      localStorage.setItem('gasInfo', JSON.stringify(row))
      this.$router.push({
        name: 'gasDetail',
        params: {
          type
        }
      })
    },
    // 获取营业状态
    async getBusinessStatus () {
      try {
        const {code, result} = await getBusinessStatus()
        if (code !== 200) return
        this.gasStatus = Object.values(result)
      } catch (err) {
        console.log(err)
      }
    },
    closeGas (gasId) {
      this.gasId = gasId
      this.showAddGasDialog = true
    },
    async closeGasApi () {
      if (!this.comment) {
        this.$message({
          message: '请输入关闭原因',
          type: 'warning'
        })
        return
      }
      this.closeLoading = true
      try {
        const { code, message } = await closeGasInfo({comment: this.comment, gasId: this.gasId})
        if (code !== 200) {
          this.$message({
            message,
            type: 'error'
          })
          this.closeLoading = false
          return
        }
        this.$message({
          message: '暂时关闭成功',
          type: 'success'
        })
        this.initPage()
      } catch (error) {
        console.log('关闭失败，原因：', error)
      }
      this.comment = ''
      this.closeLoading = false
      this.showReasonDialog = false
      this.showAddGasDialog = false
    }
  },
  created () {
    this.initPage()
    this.initGasNameSelect()
    this.getCompanyInfo()
    this.getBusinessStatus()
  }
}
</script>
<style lang="less" scoped>
  .info-wrap {
    width: 100%;
    height: 100%;
    background: rgba(248,249,253,1);
    padding: 20px 0 10px 0;
    .info-search {
      min-height: 260px;
      background: #fff;
      .merchant-info {
        min-height: 155px;
        padding: 30px 0 0 5px;
        border-bottom: 8px solid #EBEEF5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .form-item-group {
          width: 760px;
          display: flex;
          justify-content: space-between;
          &:last-child .el-input {
            width: 193px;
          }
        }
        .search-btn {
          width: 122px;
          height: 40px;
          margin-right: 15px;
        }
      }
      .gas-info {
        min-height: 105px;
        padding:0 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /deep/ .el-form-item {
          margin-bottom: 15px;
        }
      }
    }
    .table-wrap {
      margin: 30px 0;
      padding-bottom: 20px;
      background: #fff;
      overflow: hidden;
      .pagination {
        margin-top: 20px;
        float: right;
      }
    }
  }
</style>